<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/common.css" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_865299_nkef3z86ya9.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_863309_xe2mpg4u0x.css">
    <style>
        .has-top-slider {
            margin-top:
        }
    </style>
</head>

<body>
    <!-- 快速导航 -->
    <section class="has-top-slider">
        <div class="yt-list">
            <div class="yt-item" onclick="goMessagePage()">
                <div class="yt-item-icon-left">
                    <i class="iconfont icon-message has-circle"></i>
                </div>
                <div class="yt-item-content">
                    <p class="title">通知公告</p>
                    <p class="des">点击前往详情页面，查看更多！</p>
                </div>
            </div>
        </div>
    </section>
</body>
<script src="../../script/api.js"></script>
<script>
    // 全局变量
    var g_headerHeight = 44

    // 本窗口变量
    var sliderHeight = 0
    var messagePage = { name: 'message', url: '../message/index.html' }

    apiready = function() {
        initPage()
    }

    function initPage() {
        console.log('您已经进入 home 页面')
        renderScrollPicture()
        renderList()
    }

    function renderScrollPicture() {
        sliderHeight = api.winHeight / 3

        // https://docs.apicloud.com/Client-API/UI-Layout/UIScrollPicture 模块使用文档
        var UIScrollPicture = api.require("UIScrollPicture")
        UIScrollPicture.open({
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: sliderHeight
            },
            data: {
                paths: [
                    'widget://image/slider-pic.png',
                    'widget://image/slider-pic.png',
                ]
            },
            styles: {
                indicator: {
                    align: 'center',
                    color: '#FFFFFF',
                    activeColor: '#46BAFF'
                }
            },
            placeholderImg: 'widget://image/slider-pic.png',
            contentMode: 'scaleToFill',
            interval: 3,
            fixedOn: api.frameName,
            loop: true,
            fixed: false
        }, function(ret, err) {
            // do nothing
        })
    }

    function renderList() {
        // 为列表添加 top 值
        var dom = $api.dom('.has-top-slider')
        $api.css(dom, 'margin-top:' + (sliderHeight ? sliderHeight : api.winHeight / 3) + 'px')
    }

    function goMessagePage() {
      api.openWin(messagePage)
    }

    function goPage() {
        api.openWin(messagePage)
    }
</script>

</html>
